<template>
  <div>
    <h3>计划详情</h3>
    <div class="display">
      <p>计划信息</p>
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="项目编码" prop="projectNumber">
            {{ formData.projectNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训项目"
            prop="trainingProject"
            label-width="120px"
          >
            {{ formData.trainingProject }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="计划类别" prop="planType" label-width="140px">
            {{ formData.planType }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训时间" prop="trainingTime">
            {{ formData.trainingTime }}
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item
            label="组织部门/科室"
            prop="organizingDepartment"
            label-width="120px"
          >
            {{ formData.organizingDepartment }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="实施部门/科室"
            prop="implementingDepartment"
            label-width="140px"
          >
            {{ formData.implementingDepartment }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训对象" prop="trainingTarget">
            {{ formData.trainingTarget }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="计划参训人数"
            prop="plannedParticipants"
            label-width="120px"
          >
            {{ formData.plannedParticipants }}人
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item
            label="培训地点"
            prop="trainingLocation"
            label-width="140px"
          >
            {{ formData.trainingLocation }}
          </el-form-item>
        </el-col>
      </el-row>

      <div class="display">
        <p>培训信息</p>
      </div>

      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训方式" prop="trainingMethod">
            {{ formData.trainingMethod }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训分类"
            prop="trainingClassification"
            label-width="120px"
          >
            {{ formData.trainingClassification }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训课时(小时)"
            prop="trainingHours"
            label-width="140px"
          >
            {{ formData.trainingHours }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训师资" prop="training师资">
            {{ formData.training师资 }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训方向"
            prop="trainingDirection"
            label-width="120px"
          >
            {{ formData.trainingDirection }}
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训类别"
            prop="trainingCategory"
            label-width="140px"
          >
            {{ formData.trainingCategory }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" gutter="15">
        <!-- 修改 el-form-item 的样式，添加宽度为 100% -->
        <el-form-item label="备注" prop="remarks" :style="{ width: '100%' }" label-width="120px">
          {{ formData.remarks }}
        </el-form-item>
      </el-row>

      <div class="display">
        <p>预算信息</p>
      </div>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item
            label="差旅费（元）"
            prop="travelExpenses"
            label-width="120px"
          >
            {{ formData.travelExpenses }}元
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训费（元）"
            prop="trainingFees"
            label-width="120px"
          >
            {{ formData.trainingFees }}元
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="总预算（元）"
            prop="totalBudget"
            label-width="140px"
          >
            {{ formData.travelExpenses + formData.trainingFees }}元
          </el-form-item>
        </el-col>
      </el-row>

      <div class="display">
        <p>培训材料</p>
      </div>

      <div class="display">
        <p>审核信息</p>
      </div>
      
      
      <div class="detail-section">
      
        <div class="audit-info">
          <div class="audit-item">
            <div class="audit-header">
              <div class="audit-title">审核通过</div>
              <div class="audit-time">
                {{ parseTime( "2024-12-20 16:45:10") }}
              </div>
            </div>
            <div class="audit-content">
              <div>审核人员：{{  "双河镇培训管理员" }}</div>
            </div>
          </div>
          <div class="audit-item">
            <div class="audit-header">
              <div class="audit-title">提交申请</div>
              <div class="audit-time">
                {{ parseTime( "2024-12-20 16:43:41") }}
              </div>
            </div>
            <div class="audit-content">
              <div>申请人员：{{  "双河镇培训管理员" }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="bt">
        <el-form-item size="large">
          <el-button @click="goBack">返回</el-button>
          <!-- <el-button @click="resetForm">重置</el-button> -->
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  listEducate,
  getEducate,
  delEducate,
  addEducate,
  updateEducate,
} from "@/api/system/educate";
export default {
  mounted() {
    // 获取传递过来的 form 数据
    const formData = JSON.parse(this.$route.query.form);
    console.log(formData); // 输出 form 数据
  },
  components: {},
  props: [],
  data() {
    return {
      formData: {
        // //   projectNumber: null,
        // //   trainingProject: null,
        // //   // trainingTime: undefined,
        // //   trainingTarget: null,
        // //   plannedParticipants: null,
        // //   fieldtrainingLocation: null,
        // //   trainingHours: null,
        // //   remarks: null,
        // //   travelExpenses: null,
        // //   totalBudget: null,
        // //   trainingMaterials: null,
        // //   organizingDepartment: "", // 存储选中的 value
        // //   organizingDepartmentLabel: "", // 存储选中的 label
        // //   trainingTime: [], // 存储选中的培训时间
      },

      //   projectNumber: [
      //     {
      //       required: true,
      //       message: "请输入项目编号",
      //       trigger: "blur",
      //     },
      //   ],
      //   trainingProject: [
      //     {
      //       required: true,
      //       message: "请输入培训项目",
      //       trigger: "blur",
      //     },
      //   ],
      //   planType: [
      //     {
      //       required: true,
      //       message: "请选择计划类别",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingTime: [
      //     {
      //       required: true,
      //       message: "请选择培训时间",
      //       trigger: "change",
      //     },
      //   ],
      //   organizingDepartment: [
      //     {
      //       required: true,
      //       message: "请选择组织部门",
      //       trigger: "change",
      //     },
      //   ],
      //   implementingDepartment: [
      //     {
      //       required: true,
      //       message: "请选择实施部门",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingTarget: [
      //     {
      //       required: true,
      //       message: "请输入培训对象",
      //       trigger: "blur",
      //     },
      //   ],
      //   trainingMethod: [
      //     {
      //       required: true,
      //       message: "请选择培训方式",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingClassification: [
      //     {
      //       required: true,
      //       message: "请选择培训分类",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingHours: [
      //     {
      //       required: true,
      //       message: "请输入培训课时（小时）",
      //       trigger: "blur",
      //     },
      //   ],
      //   training师资: [
      //     {
      //       required: true,
      //       message: "请选择培训师资",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingDirection: [
      //     {
      //       required: true,
      //       message: "请选择培训方向",
      //       trigger: "change",
      //     },
      //   ],
      //   trainingCategory: [
      //     {
      //       required: true,
      //       message: "请选择培训类别",
      //       trigger: "change",
      //     },
      //   ],
      //   remarks: [
      //     {
      //       required: true,
      //       message: "请输入备注",
      //       trigger: "blur",
      //     },
      //   ],
      //   travelExpenses: [
      //     {
      //       required: true,
      //       message: "请输入差旅费",
      //       trigger: "blur",
      //     },
      //   ],
      //   trainingFees: [
      //     {
      //       required: true,
      //       message: "请输入培训费（元）",
      //       trigger: "blur",
      //     },
      //   ],
      //   totalBudget: [
      //     {
      //       required: true,
      //       message: "请输入总预算",
      //       trigger: "blur",
      //     },
      //   ],
      // }
    };
  },
  computed: {},
  watch: {},
  created() {
    // 获取路由参数中的 id
    // const id = this.$route.params.id;
  },
  mounted() {
    if (this.$route.params.formData) {
      this.formData = this.$route.params.formData; // 获取数据
    } else {
      // 如果数据不存在，跳回上一页或提示用户
      this.$router.go(-1);
    }
  },
  methods: {
    // 处理全选逻辑
    handleSelectAll() {
      if (
        this.formData.trainingTime.length === this.trainingTimeOptions.length
      ) {
        // 如果已经全选，则清空
        this.formData.trainingTime = [];
      } else {
        // 否则选中所有季度
        this.formData.trainingTime = this.trainingTimeOptions.map(
          (item) => item.value
        );
      }
    },
    // 处理树节点点击事件
    handleNodeClick(data) {
      this.formData.organizingDepartment = data.value; // 设置选中的 value
      this.formData.organizingDepartmentLabel = data.label; // 设置选中的 label
      this.treeVisible = false; // 关闭弹窗
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        addEducate(this.formData).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "提交成功",
              type: "success",
              duration: 1500,
            });
            // 提交成功后跳转到 index.vue 页面
            this.$router.push("/educate");
          }
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.display {
  height: 60px;
  width: 100%;
  background-color: #f3f7fa;
  margin-bottom: 22px;
  margin-left: 19px;
  margin-top: 22px;
  margin-right: 19px;

  display: flex;
  /* justify-content: center;  */
  align-items: center;
}

h3 {
  font-size: 20px;
  margin-left: 75px;
  margin-top: 38px;
  margin-bottom: 38px;
}

p {
  margin-left: 56px;
  /* margin-top: 20px;
  margin-bottom: 20px; */
  font-size: 18px;
}

#tranfer {
  margin-left: 68px;
}

.bt {
  display: flex;
  justify-content: center;
}

.approval-container {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin-left:78px;
  padding: 20px;
  /* border: 1px solid #ccc;
  border-radius: 8px; */

}

.approval-section {
  margin-bottom: 20px;
}

.approval-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.approval-time {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px;
}

.approval-person {
  font-size: 16px;
  color: #666;
}

.audit-info {
  margin-left: 78px;
  padding: 15px;
  font-size: 13px;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    left: 19px;
    top: 20px;
    width: 1px;
    height: 70px;
    background-color: #409eff;
    z-index: 0;
  }
}

.audit-item {
  margin-bottom: 15px;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }

  .audit-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }

  .audit-title {
    color: #409eff;
    position: relative;
    padding-left: 15px;
    margin-right: 10px;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #409eff;
    }
  }

  .audit-time {
    color: #909399;
    font-size: 16px;
  }

  .audit-content {
    color: #606266;
    padding-left: 15px;
    line-height: 1.8;
  }

  // .audit-info {
  //   width: 500px;
  //   margin-left:78px;
  // }
}
</style>
